<template>
   <div class="common-layout">
       <el-container>
         <el-header>
			 
			 <el-row>
				<el-col :span="22">
					<h1>饿了么后台管理系统</h1>
				</el-col>
				<el-col :span="2">
					<el-button link type="primary" style="margin-top: 50px;" @click="handlelogOut">退出登录</el-button>
				</el-col>
			 </el-row>
		 </el-header>
         <el-container>
           <el-aside>
			
			<el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
				<el-radio-button :label="false">展开</el-radio-button>
				<el-radio-button :label="true">收起</el-radio-button>
			</el-radio-group>
			<el-menu
				default-active="2"
				class="el-menu-vertical-demo"
				:router="true"
				:collapse="isCollapse"
				@open="handleOpen"
				@close="handleClose"
			>
			    <!-- 遍历一级菜单 -->
				<el-sub-menu v-for="menu in menuList" :key="menu.id" :index="menu.component">
					<template #title>
						<el-icon><location /></el-icon>
						<span>{{menu.name}}</span>
					</template>
					<!-- 一级菜单下的二级菜单 -->
					<el-menu-item v-for="child in menu.children" 
								:key="child.id" 
								:index="'/main/'+child.component">
								<el-icon><icon-menu /></el-icon>
								<span>{{child.name}}</span>
					</el-menu-item>
				</el-sub-menu>
			</el-menu>
			   
		   </el-aside>
           <el-main>
			   <!-- 二级路由 -->
			   <router-view/>
		   </el-main>
         </el-container>
       </el-container>
     </div>
</template>

<script setup>
	import {onMounted, ref, getCurrentInstance, computed} from 'vue';
	import store from '@/store';
	import {
	  Menu as IconMenu,
	  Location,
	  User,
	  Dish,
	  ShoppingCart,
	  List,
	  Document,
	  Setting,
	} from '@element-plus/icons-vue'
	
	let {proxy} = getCurrentInstance();

	//展开菜单或收起
	const isCollapse = ref(false)
	const handleOpen = (key, keyPath) => {
		console.log(key, keyPath)
	}
	const handleClose = (key, keyPath) => {
		console.log(key, keyPath)
	}

	//当前登录上来的用户
	const user = ref({
		roleId: 1
	})

	//查到当前角色的菜单列表
	const menuList = ref([])

	/*
	查询当前角色菜单
	*/
	const getMenu = ()=>{

		proxy.$axios({
			method: 'post',
			url: '/menu/tree',
			data: {
				roleId: user.value.roleId
			}
		}).then(res=>{
		  let resultBean = res.data;
		  if(resultBean.code == 200){
			menuList.value = resultBean.data;
		  }
		})

	}

	onMounted(()=>{
		getMenu();
	})
	
	// //计算属性
	// let activeRoute = computed(()=>{
	// 	return store.state.elMenuActive;
	// });
	
	// //监听菜单栏项的选中
	// const menuSelect = (selectPath)=>{
	// 	console.log('menuSelect---',selectPath);
	// 	//将选中项的路径赋值给store中的变量
	// 	store.state.elMenuActive = selectPath;
	// }

	// //---------处理退出登录--------------
	// const handlelogOut = ()=>{
	// 	//移除浏览器本地存储中登录用户的信息
	// 	window.localStorage.removeItem("adminUser");
	// 	//发送退出登录的请求去服务端删除session中的登录状态
	// 	proxy.$axios({
	// 		method: 'get',
	// 		url: '/log/out'
	// 	}).then(res=>{
	// 		let resultBean = res.data;
	// 		if(resultBean.code == 200){
	// 			proxy.$router.push("/login");
	// 		}else{
	// 			ElMessage.error(resultBean.msg);
	// 		}
	// 	})
	// }
	
</script>

<style scoped>
	
	.common-layout{
		width: 100%;
		height: 800px;
	}
	
	.el-header{
		height: 80px;
		line-height: 80px;
		background-color: azure;
	}
	
	.el-aside{
		width: 20%;
		height: 720px;
	}
	

	.el-menu-vertical-demo:not(.el-menu--collapse) {
		width: 200px;
		min-height: 400px;
	}
	
</style>
